<template>
  <div class="divWarehouse">
    <!-- 搜索 -->
    <div class="box divHead">
      <div class="serchForm">
        <el-form
          ref="ruleForm"
          :inline="true"
          :model="search"
        >
          <el-row :gutter="30">
            <el-col :span="8">
              <el-form-item
                label="货品编号"
                prop="code"
              >
                <el-input
                  v-model="search.code"
                  placeholder="请输入"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item
                label="货品名称"
                prop="name"
              >
                <el-input
                  v-model="search.name"
                  placeholder="请输入"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item
                label="货主名称"
                prop="ownerName"
              >
                <el-input
                  v-model="search.ownerName"
                  placeholder="请输入"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div class="textRight">
        <base-button
          class="minorImportantButton btnSearch"
          @click="handleSearch"
        >搜索</base-button>
        <base-button
          class="unimportanceButton"
          @click="handleReset"
        >重置</base-button>
      </div>
    </div>
    <!-- end -->
    <div class="box divContent">
      <div class="tableInfo">
        <base-button
          class="importantButton"
          @click="handleAdd"
        >新增货品</base-button>
      </div>
      <!-- 表格数据 -->
      <div v-if="listData.length>0">
        <el-table
          :data="listData"
          stripe
          border
          style="width: 100%"
          v-loading="loading"
        >
          <el-table-column
            type="index"
            label="序号"
            width="68"
          />
          <el-table-column
            prop="goodsTypeName"
            label="货品类型名称"
            width="180"
          />
          <el-table-column
            prop="code"
            label="货品编号"
            width="180"
          />
          <el-table-column
            prop="barCode"
            label="货品条码"
            width="180"
          />
          <el-table-column
            prop="name"
            label="货品名称"
            width="180"
          />
          <el-table-column
            prop="ownerName"
            label="货主名称"
            width="180"
          />
          <el-table-column
            prop="inspectionType"
            label="质检方式"
            width="160"
          >
            <template slot-scope="{ row }">
              <span v-if="row.inspectionType==='BCL'">不处理</span>
              <span v-if="row.inspectionType==='QJ'">全检</span>
              <span v-if="row.inspectionType==='CJ'">抽检</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="temperatureType"
            label="温度要求"
            width="160"
          >
            <template slot-scope="{ row }">
              <span v-if="row.temperatureType==='CW'">常温</span>
              <span v-if="row.temperatureType==='LC'">冷藏</span>
              <span v-if="row.temperatureType==='HW'">恒温</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="bearingType"
            label="承重要求"
            width="160"
          >
            <template slot-scope="{ row }">
              <span v-if="row.bearingType==='ZX'">重型</span>
              <span v-if="row.bearingType==='QX'">轻型</span>
              <span v-if="row.bearingType==='BX'">中型</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="areaName"
            label="指定库区"
            width="160"
          />
          <el-table-column
            prop="volume"
            label="体积 m3"
            width="160"
          />
          <el-table-column
            prop="price"
            label="单价（元）"
            width="160"
          />
          <el-table-column
            prop="unit"
            label="单位"
            width="180"
          />
          <el-table-column
            prop="guaranteeDay"
            label="保质天数（天）"
            width="160"
          />
          <el-table-column
            prop="updateTime"
            label="更新时间"
            width="200"
          />
          <el-table-column
            fixed="right"
            label="操作"
            width="180"
          >
            <template slot-scope="{ row }">
              <base-button
                class="fontOperateButton"
                @click="handleEdit(row.id)"
              >编辑</base-button>
              <base-button
                class="fontOperateButton"
                @click="handleDelect(row)"
              >删除</base-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- end -->
        <!-- 分页 -->
        <base-pagination
          :total="total"
          :limit="search.size"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
        ></base-pagination>
        <!-- end -->
      </div>
      <div
        v-else
        class="emptyTip"
      >
        <span class="imgIcon"></span>
        <p>暂无货品</p>
      </div>
      <!-- 删除 -->
      <dialog-base
        :visible="dialogData.visible"
        :dialogData="dialogData"
        @handlesubmit="handleSubmit"
        @handleclose="handleClose"
      ></dialog-base>
      <!-- end -->
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
// 公用组件
// 按钮
import BaseButton from '@/components/base-button/index.vue'
// 分页
import BasePagination from '@/components/base-pagination/index.vue'
// 本模块组件
import DialogBase from '../components/dialog.vue'
// interface接口
import { ICommonReturn } from '@/utils/common-interface'
import { GoodsTabaleData } from '@/module-base/interface/goods'
// api数据接口
import { getGoodsList, deleteGoods } from '@/module-base/api/goods'
import { mixins } from 'vue-class-component'
import SinglePage from '@/mixin/single-page'
@Component({
  name: 'GoodsList',
  components: {
    BaseButton,
    BasePagination,
    DialogBase
  }
})
export default class extends mixins(SinglePage) {
  private listData: GoodsTabaleData[] = [] // 数据列表
  private total = 0
  private ref: any = this.$refs
  private loading = false
  private delectData = []
  private deleData = {}
  private search = {
    id: '', // id
    code: '', // 编号
    name: '', // 货品名称
    ownerName: '', // 货主名称
    size: 10, // 每页显示10条
    current: 1 // 当前页
  }

  private dialogData = {
    id: '',
    msg: '',
    dialogTitle: '',
    visible: false
  }

  created() {
    this.getList()
  }

  // 功能
  private handleSearch() {
    this.getList()
  }

  // 获取数据
  private async getList() {
    this.loading = true
    const { data } = await getGoodsList(this.search)
    this.loading = false
    this.listData = data.records
    this.total = parseInt(data.total, 10)
  }

  // TODO可以删除，货品有库存不能删除
  // 删除数据
  handleDelect(val: any) {
    if (this.confirmMsg()) {
      return
    }
    this.dialogData.visible = true
    this.dialogData.msg = `确定要删除货品：${val.name} 吗？`
    this.dialogData.id = val.id
    this.dialogData.dialogTitle = '确认删除'
  }

  // 确定删除
  private async handleSubmit() {
    const ids = [this.dialogData.id]
    const data = ((await deleteGoods({ ids: ids })) as unknown) as ICommonReturn
    if (data.code === 0) {
      this.dialogData.visible = false
      this.$message.success('删除成功')
      this.getList()
    } else {
      this.$message.error(data.msg)
    }
  }

  // ui
  // 添加货品
  private handleAdd() {
    this.$router.push({ path: 'goods/details/null' })
  }

  // 编辑货品
  private handleEdit(id: string) {
    this.$router.push({ path: `goods/details/${id}` })
  }

  // 重置
  handleReset() {
    this.ref.ruleForm.resetFields()
    this.getList()
  }

  // 当前页
  private handleCurrentChange(page: number) {
    this.search.current = page
    this.getList()
  }

  // 每页条数
  private handleSizeChange(page: number) {
    this.search.size = page
    this.search.current = 1
    this.getList()
  }

  // 弹层关闭
  private handleClose() {
    this.dialogData.visible = false
    this.getList()
  }
}
</script>
